<template>
  <div class="one-page">
    <div class="top top-img-bg-box">
      <div class="main-content">
        <div class="d1">鲸势BOX区块链一体机</div>
        <div class="d2">国内首款自研软硬件一体机</div>
        <div class="line-box"></div>
        <div class="d3">
          鲸势BOX集边缘计算服务器、物联网节点和区块链运行平台与一体，通过千兆网、4G/5G/WiFi/NB-IoT/Zigbee/Ethernet/CAN/RS-485等
          通信接口实现双向高速数据交换。保证上链更简单、更安全、更可靠，保障数据共享与交换安全，信息传递与协同需要高效。
        </div>
      </div>
    </div>
    <div class="solution-item-box main-content">
      <div class="item-title-box">技术优势</div>
      <div class="solution-line-box"></div>
      <div class="solution-item-row-box">
        <a-row
          type="flex"
          :gutter="{ xs: 20, sm: 20, md: 50, lg: 200 }"
          justify="space-between"
        >
          <a-col :span="12" v-for="item in solutionLsit" :key="item.title">
            <div>
              <div class="row-icon-box">
                <img :src="require(`@/assets/product/${item.icon}.png`)" />
              </div>
              <div class="row-title-box">
                {{ item.title }}
              </div>
              <div class="row-dec-box" v-html="item.dec"></div>
            </div>
            <div class="row-children-box" v-if="item.children">
              <div
                class="children-item-box"
                v-for="cItem in item.children"
                :key="cItem"
              >
                <div class="item-cicle-box"></div>
                <div class="item-title-box">{{ cItem }}</div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import SolutionAdvantage from "../../solution/commont/solution-advantage.vue";
export default {
  components: { SolutionAdvantage },
  props: {},
  data() {
    return {
      solutionLsit: [
        {
          icon: "icon1",
          title: "开机即用",
          dec:
            "即插即用，一键部署建链，实现秒级的区块链快速组网。各项指标全面监控。简单一点，即可上链",
        },
        {
          icon: "icon2",
          title: "快速部署",
          dec:
            "鲸势区块链一体机即用即上链的特性，显著提升区块链的部署效率。不仅可以节省90%以上的部署时间，还可以提升30%的交易速度、降低40%的共识延迟、加速密码运算5-10倍",
        },
        {
          icon: "icon3",
          title: "软硬一体",
          dec:
            "平台搭建、硬件支持、应用定制全面一体化，全面融合服务器硬件、区块链基础平台，打造全新产品服务新模式",
        },
        {
          icon: "icon4",
          title: "性能出众",
          dec:
            "出厂前完成专业测试及性能调优，无兼容性问题，端到端通用隐私保护，高性能安全密钥保护，最大程度保证了合约执行过程中的数据安全隐私。",
        },
      ],
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.one-page {
  //   position: relative;
  width: 100%;
  .top-img-bg-box::before {
    padding-top: 30% !important;
  }
  .top {
    width: 100vw;
    background: url("../../../assets/product/pic.png") no-repeat;
    background-size: 100% 100%;
    padding: 20px 0;
    .main-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .d1 {
        font-size: 2.8125rem;
        font-weight: 600;
        color: #ffffff;
        line-height: 3.9375rem;
        letter-spacing: 1px;
      }

      .d2 {
        font-size: 1.75rem;
        font-weight: 300;
        color: #ffffff;
        line-height: 2.625rem;
        letter-spacing: 1px;
        margin: 1.125rem 0;
      }
      .d3 {
        margin: 1.125rem 0;

        font-size: 0.75rem;
        font-weight: 400;
        color: #ffffff;
        line-height: 1.5625rem;
        letter-spacing: 1px;
      }
      .line-box {
        width: 48px;
        height: 2px;
        background: #31a3ff;
      }
    }
  }

  .solution-item-box {
    padding: 44px 0px;
    .item-title-box {
      font-size: 24px;
      font-weight: 600;
      color: #444444;
      line-height: 36px;
    }

    .solution-line-box {
      width: 48px;
      height: 2px;
      background: #31a3ff;
      margin-top: 20px;
      margin-bottom: 13px;
    }
    .solution-item-row-box {
      .ant-row {
        display: -webkit-box !important;
      }
      .ant-col {
        margin: 2.5rem 0;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
      }

      .row-icon-box {
        img {
          height: 42px;
        }
      }

      .row-title-box {
        font-size: 16px;
        font-weight: 600;
        color: #444444;
        line-height: 24px;
        margin-top: 35px;
        margin-bottom: 24px;
      }

      .row-dec-box {
        font-size: 14px;
        font-weight: 300;
        color: #444444;
        line-height: 22px;
        // width: 65%;
      }
    }
  }
}
</style>
